import Vue,{PropOptions,PropType,VNode} from 'vue';
import {QSpinner} from 'quasar';
import {PlainObject,StringOrVue} from '../../../../types';
import Icon from '../icon';
import Popup from '../popup';
/**
 * 轻提示类型
 */
export type ToastType='normal'|'loading'|'success'|'fail';
/**
 * 显示位置
 */
export type Position='top'|'center'|'bottom';
/**
 * 关闭时调用的函数
 */
export interface CloseFunction{
	():void,
}
/**
 * 轻提示
 * @author 唐国雄
 * @date 2021/7/27
 * 属性----------------------
 * :message					提示内容, StringOrVue
 * :type					轻提示类型, ToastType
 * :position				提示位置, 仅type为'normal'时有用, Position
 * :duration				显示时长, 0表示不限制, type为'loading'时必为0, number
 * :overlay					显示遮罩层, type为'loading'时必为true, boolean
 * :close-on-click			点击后关闭, type为'loading'时必为false, boolean
 * :close-on-click-overlay	点击遮罩层后关闭, type为'loading'时必为false, boolean
 * :on-close				关闭时的回调, CloseFunction
 * :content-class			内容的class, string
 * :content-style			内容的style, PlainObject
 */
export default Vue.extend({
	name:'Toast',
	props:{
		//提示内容
		message:{
			type:[String,Object],
			required:true
		} as PropOptions<StringOrVue>,
		//轻提示类型
		type:{
			type:String,
			default:'normal',
			validator(v){
				return [
					'normal',
					'loading',
					'success',
					'fail',
				].indexOf(v)!==-1;
			}
		} as PropOptions<ToastType>,
		//提示位置
		position:{
			type:String,
			default:'bottom',
			validator(v){
				return [
					'top',
					'center',
					'bottom',
				].indexOf(v)!==-1;
			}
		} as PropOptions<Position>,
		//显示时长
		duration:{
			type:Number,
			default:3,
			validator(v){
				return v>=0;
			}
		},
		//显示遮罩层
		overlay:Boolean,
		//点击后关闭
		closeOnClick:Boolean,
		//点击遮罩层后关闭
		closeOnClickOverlay:Boolean,
		//关闭时的回调
		onClose:Function as PropType<CloseFunction>,
		//内容的class
		contentClass:String,
		//内容的style
		contentStyle:{} as PropOptions<PlainObject>,
	},
	data(){
		return {
			show:true,
		};
	},
	computed:{
		classes():string{
			return 'lexmis-Toast'+
				` lexmis--${this.type}`+
				` lexmis--${this.realState.position}`;
		},
		realState():{
			overlay:boolean,
			closeOnClick:boolean,
			closeOnClickOverlay:boolean,
			duration:number,
			position:Position,
			}{
			const {
				overlay,
				type,
				position,
				duration,
				closeOnClick,
				closeOnClickOverlay,
			}=this;
			return {
				overlay:overlay||type==='loading',
				closeOnClick:type==='loading'?false:closeOnClick,
				closeOnClickOverlay:type==='loading'?false:closeOnClickOverlay,
				duration:type==='loading'?0:duration,
				position:position==='center'||type!=='normal'?'center':position,
			};
		}
	},
	mounted(){
		const duration=this.realState.duration;
		if(duration>0){
			setTimeout(() => {
				this.onClose();
			},duration*1000);
		}
	},
	render(h):VNode{
		return h(Popup,{
			staticClass:this.classes,
			props:{
				...this.realState,
				position:null,
				transitionAppear:true,
				value:this.show,
				contentClass:this.contentClass,
				contentStyle:this.contentStyle,
			},
			on:{
				hidden:() => {
					this.onClose();
				},
				input:(val:boolean) => {
					this.show=val;
				}
			}
		},[
			this.type==='loading'
				?h(QSpinner,{
					staticClass:'lexmis_spinner',
				})
				:this.type!=='normal'
					?h(Icon,{
						staticClass:'lexmis_type',
						props:{name:this.type==='success'?'check_circle_outline':'highlight_off'}
					})
					:null,
			typeof this.message==='string'
				?this.message
				//todo 自定义渲染
				:null
		]);
	}
});
